<template>
	<div style="height: 400px;border: 1px solid blue;">
		<div style="height: 100px;">
			<h2>登分</h2>
		<d>教的班级编号:{{data.clzno}}</d>&nbsp;
		<d>教的课程编号:{{data.cno}}</d>
		<button @click="update()" style="float:right;">批量保存成绩</button>
		</div>
		<div>
			<table border="1" class="ce">
				<tr><th>学生账号</th><th>学生姓名</th><th>班级</th><th>课程</th><th>成绩</th></tr>
				<tr v-for="(x,idx) in data.marks">
					<td>{{x.sno}}</td>
					<td>{{x.user.uname}}</td>
					<td>{{x.user.clz.clzname}}</td>
					<td>{{x.course.cname}}</td>
					<td><input type="text" v-model="x.score" /></td>
				</tr>
			</table>
			
		</div>
		
		
	</div>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import {$get,$postx,$postj,$postf} from "../../ajax/index.js"
	import myalert from "../../utils/myalert.js"
import { useRoute } from 'vue-router'
import router from '../../router/index.js'

	const data = reactive({
		clzno:'',
		cno:'',
		marks:[]
		})
		
	onMounted(()=>{
		const router=useRoute();
		data.clzno=router.query.clzno;
		data.cno=router.query.cno;
		console.log("班级编号=");
		console.log(data.clzno);
		console.log("课程编号=");
		console.log(data.cno);
		$get("/api/fore/tea/findMark?clzno="+data.clzno+"&cno="+data.cno)
		.then((resp)=>{
			console.log(resp.data.data);
			data.marks=resp.data.data;
			for (var i = 0; i < data.marks.length; i++) {
				data.marks[i].oldsore=data.marks[i].score
			}
			console.log(data.marks);
		})
	})
	function update(){
		console.log(data.marks);
		let mark=[];
		for (var i = 0; i < data.marks.length; i++) {
			let ma=data.marks[i];
			if(ma.score !=ma.oldsore ){
				let obj={};
				obj.id=ma.id;
				obj.sno=ma.sno;
				obj.cno=ma.course.cno;
				obj.score=ma.score;
				obj.tpost=new Date();
				mark.push(obj);
			}
		}
		$postj("api/fore/tea/addMark",mark)
		.then((resp)=>{
			myalert("批量提交成功")
		})
		
	
	}
	
</script>

<style>
	.ce{
		margin-top: auto;
		margin-right:auto;
	}
</style>
